<template>
  <div>
    <div id="demo"></div>
    <div id="demo1"></div>
    <div id="demo2"></div>
    <div id="demo3"></div>
    <div id="demo4"></div>
    <div id="demo5"></div>
    <div class="demo"></div>
    <div class="demo2">
      <a href="#">拥有三角形的气泡</a>
      <div class="bubble">
        <span>
          <em></em>
        </span>纯css写带边框的三角形
      </div>
    </div>
    <div class="tang"></div>

    <div id="wraper">
      <div id="power"></div>
      <div id="play"></div>
      <div id="pause"></div>
      <div id="stop"></div>
      <div id="comment"></div>
      <div id="like"></div>
      <div id="search"></div>
      <div id="home"></div>
      <div id="photo"></div>
      <div id="email"></div>
      <div id="file"></div>
      <div id="history"></div>
      <div id="video"></div>
      <div id="tags"></div>
      <div id="phone"></div>
      <div id="profile"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  margin: 0;
  padding: 0;
}
#demo {
  width: 100px;
  height: 100px;
  background: red;
  border: 20px solid black;
  margin: 30px;
}
#demo1 {
  width: 100px;
  height: 100px;
  background: red;
  /* border: 20px solid black; */
  border-top: 20px solid green;
  border-bottom: 20px solid blue;
  border-right: 20px solid yellow;
  border-left: 20px solid grey;
  margin: 30px;
}
#demo2 {
  width: 10px;
  height: 10px;
  background: red;
  /* border: 20px solid black; */
  border-top: 20px solid green;
  border-bottom: 20px solid blue;
  border-right: 20px solid yellow;
  border-left: 20px solid grey;
  margin: 30px;
}
#demo3 {
  width: 0px;
  height: 0px;
  background: red;
  /* border: 20px solid black; */
  border-top: 20px solid green;
  border-bottom: 20px solid blue;
  border-right: 20px solid yellow;
  border-left: 20px solid grey;
  margin: 30px;
}

#demo4 {
  width: 0px;
  height: 0px;
  /* border: 20px solid black; */
  border-top: 20px solid green;
  border-bottom: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  margin: 30px;
}
#demo5 {
  width: 0px;
  height: 0px;
  /* border: 20px solid black; */
  border-top: 70px solid green;
  /* border-bottom: 20px solid transparent; */
  border-right: 70px solid transparent;
  border-left: 0px solid transparent;
  margin: 30px;
}
.demo {
  width: 0px;
  height: 0px;
  border-bottom: 40px solid yellow;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  position: relative;
}
.demo::after {
  position: absolute;
  top: -1px; /* 根据实际情况调整 */
  left: -52px; /* 三角形顶部的点实际上是content的点，position是相对于content定位的 */
  width: 0px;
  height: 0px;
  border-bottom: 42px solid red;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  content: "";
  box-shadow: 0 0 2px rgb(0, 0, 0); /* 这是为了看出来绝对定位 */
  z-index: -1; /* 这是为了在主题的下面 */
}

.demo2 {
  width: 200px;
  position: relative;
  margin: 200px;
}
.demo2 a {
  color: green;
}
.demo2 .bubble {
  width: 100px;
  background: bisque;
  padding: 10px;
  color: red;
  border-radius: 10px;
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px solid black;
}
.bubble span {
  display: block;
  width: 0;
  height: 0;
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent bisque;
  position: absolute;
  top: -10px;
  margin-left: -10px;
  left: 50%;
}

.bubble span em {
  display: block;
  width: 0;
  height: 0;
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent black;
  position: absolute;
  top: -1px;
  left: -10px;
  z-index: -1;
}
.tang {
  margin: 200px;
  width: 0;
  height: 0;
  border-width: 0 40px 80px;
  border-color: transparent transparent blue;
  border-style: solid;
  position: relative;
}
.tang::after {
  width: 0;
  height: 0;
  border-width: 80px 40px 0;
  border-color: red transparent transparent;
  border-style: solid;
  position: absolute;
  top: 30px;
  left: -40px;
  content: "";
}

#phone {
  width: 50px;
  height: 50px;
  border-left: 6px solid #eeb422;
  border-radius: 20%;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  margin: 20px;
  margin-right: 0px;
  position: relative;
  display: inline-block;
  top: -5px;
}
#phone:before {
  width: 15px;
  height: 15px;
  background: #eeb422;
  border-radius: 20%;
  content: "";
  position: absolute;
  left: -2px;
  top: 1px;
}
#phone:after {
  width: 15px;
  height: 15px;
  background: #eeb422;
  border-radius: 20%;
  content: "";
  position: absolute;
  left: -3px;
  top: 34px;
}
#wraper {
  padding: 10px;
  width: 380px;
  height: 380px;
  border: 3px solid #ccc;
  margin: auto;
}
#power {
  width: 30px;
  height: 30px;
  margin: 20px;
  border: 6px solid #eeb422;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
#power:before {
  width: 7px;
  height: 22px;
  background: #eeb422;
  position: absolute;
  left: 8px;
  top: -13px;
  content: "";
  border: 3px solid #fff;
}
#play {
  width: 30px;
  height: 30px;
  margin: 20px;
  border: 6px solid #eeb422;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  background: #eeb422;
}
#play:before {
  border: 11px solid transparent;
  border-left: 17px solid #fff;
  content: "";
  position: absolute;
  left: 9px;
  top: 3px;
}
#pause {
  width: 30px;
  height: 30px;
  margin: 20px;
  border: 6px solid #eeb422;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  background: #eeb422;
}
#pause:before {
  height: 20px;
  width: 5px;
  border: 0px solid transparent;
  border-left: 8px solid #fff;
  border-right: 8px solid #fff;
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
}
#stop {
  width: 30px;
  height: 30px;
  margin: 20px;
  border: 6px solid #eeb422;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  background: #eeb422;
}
#stop:before {
  height: 17px;
  width: 17px;
  background: #fff;
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
}
#comment {
  width: 50px;
  height: 25px;
  margin: 20px;
  border: 6px solid #eeb422;
  border-radius: 20%;
  position: relative;
  display: inline-block;
  background: #eeb422;
}
#comment:before {
  border: 10px solid transparent;
  border-top: 10px solid #eeb422;
  content: "";
  position: absolute;
  left: 28px;
  top: 28px;
}
#comment:after {
  content: "....";
  position: absolute;
  color: #fff;
  font-size: 26px;
  top: -10px;
  left: 2px;
}
#like {
  width: 50px;
  height: 30px;
  margin: 20px;
  border-radius: 55%;
  transform: rotate(55deg);
  -webkit-transform: rotate(55deg);
  position: relative;
  display: inline-block;
  background: #eeb422;
}
#like:before {
  width: 50px;
  height: 30px;
  border-radius: 55%;
  transform: rotate(-110deg);
  -webkit-transform: rotate(-110deg);
  background: #eeb422;
  content: "";
  position: absolute;
  left: 8px;
  top: -12px;
}
#search {
  width: 20px;
  height: 20px;
  border: 4px solid #eeb422;
  border-radius: 50%;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: -5px;
  left: -5px;
}
#search:before {
  width: 20px;
  height: 5px;
  background: #eeb422;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  content: "";
  position: absolute;
  left: 15px;
  top: 22px;
}
#home {
  width: 30px;
  height: 30px;
  background: #eeb422;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: 5px;
}
#home:before {
  width: 6px;
  height: 12px;
  background: #fff;
  content: "";
  position: absolute;
  left: 12px;
  top: 20px;
}
#home:after {
  border: 25px solid transparent;
  border-bottom: 20px solid #eeb422;
  content: "";
  position: absolute;
  top: -38px;
  left: -10px;
}
#photo {
  width: 40px;
  height: 30px;
  background: #eeb422;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: 5px;
}
#photo:before {
  width: 13px;
  height: 13px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #eeb422;
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
}
#photo:after {
  width: 15px;
  height: 10px;
  background: #eeb422;
  content: "";
  position: absolute;
  top: -7px;
  left: 13px;
}
#photo {
  width: 40px;
  height: 30px;
  background: #eeb422;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: 5px;
}
#email {
  width: 50px;
  height: 35px;
  background: #eeb422;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: 5px;
}
#email:before {
  border: 25px solid transparent;
  border-top: 20px solid #fff;
  content: "";
  position: absolute;
  left: 0px;
  top: 2px;
}
#email:after {
  border: 25px solid transparent;
  border-top: 20px solid #eeb422;
  content: "";
  position: absolute;
  top: 0px;
}
#file {
  width: 30px;
  height: 45px;
  border: 4px solid #eeb422;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: 5px;
}
#file:before {
  border: 10px solid #fff;
  border-right: 10px solid #eeb422;
  border-bottom: 10px solid #eeb422;
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
}
#file:after {
  width: 20px;
  height: 5px;
  border-top: 3px solid #eeb422;
  border-bottom: 3px solid #eeb422;
  content: "";
  position: absolute;
  left: 5px;
  top: 25px;
}
#history {
  width: 35px;
  height: 35px;
  border: 4px solid #eeb422;
  border-radius: 50%;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: 5px;
}
#history:before {
  width: 14px;
  height: 14px;
  border-bottom: 4px solid #eeb422;
  border-left: 4px solid #eeb422;
  content: "";
  position: absolute;
  left: 14px;
  top: 3px;
}
#video {
  width: 50px;
  height: 35px;
  background: #eeb422;
  border-radius: 20%;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: -5px;
}
#video:before {
  width: 6px;
  height: 6px;
  border: 11px solid transparent;
  border-right: 11px solid #eeb422;
  content: "";
  position: absolute;
  left: 35px;
  top: 4px;
}
#video:after {
  width: 10px;
  height: 10px;
  border: 6px solid transparent;
  border-top: 6px solid #eeb422;
  border-left: 6px solid #eeb422;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  content: "";
  position: absolute;
  left: 13px;
  top: 35px;
}
#tags {
  width: 50px;
  height: 25px;
  background: #eeb422;
  border-radius: 35% 0% 0% 35%;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin: 20px;
  margin-left: 35px;
  position: relative;
  display: inline-block;
  top: -5px;
}
#tags:before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
}
#phone {
  width: 50px;
  height: 50px;
  border-left: 6px solid #eeb422;
  border-radius: 20%;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  margin: 20px;
  margin-right: 0px;
  position: relative;
  display: inline-block;
  top: -5px;
}
#phone:before {
  width: 15px;
  height: 15px;
  background: #eeb422;
  border-radius: 20%;
  content: "";
  position: absolute;
  left: -2px;
  top: 1px;
}
#phone:after {
  width: 15px;
  height: 15px;
  background: #eeb422;
  border-radius: 20%;
  content: "";
  position: absolute;
  left: -3px;
  top: 34px;
}
#profile {
  width: 40px;
  height: 15px;
  background: #eeb422;
  border-radius: 45% 45% 0 0;
  margin: 20px;
  position: relative;
  display: inline-block;
  top: 0px;
}
#profile:before {
  width: 20px;
  height: 22px;
  background: #eeb422;
  border-radius: 40%;
  content: "";
  position: absolute;
  left: 10px;
  top: -22px;
}
</style>
